<script>

/*
bodyJson 规则
[
  {
    "type": "fileIdOfVideo",
    "value": 592191893413893
  },
  {
    "type": "fileIdOfImg",
    "value": 592191893413893
  },
]
 */


export default {
  props:{
    projectCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: [],
      show: false,
      requestParam: {
        bodyJson: [
          {
            "type": "fileIdOfVideo",
            "value": 592191893413893
          },
          {
            "type": "fileIdOfImg",
            "value": 592191893413893
          },
        ],

        params: [
          {
            "paramId": 1,
            "value": 592191893413893
          },
          {
            "paramId": 2,
            "value": 592191893413893
          },
        ],

        attrJson: [
          {
            "attrId": 1,
            "value": 592191893413893
          },
          {
            "attrId": 2,
            "value": 592191893413893
          },
        ],


        detailJson: [
          {
            type: "fileIdOfImg",
            value: 592191893413893
          },
          {
            type: "fileIdOfVideo",
            value: 592191893413893
          }
        ],
        "bodyJsonStr": null,
        "costPrice": null,
        "detailJsonStr": null,
        "fileIdOfMain": 592191893413893,
        "gmtCreate": null,
        "gmtModified": null,
        "id": null,
        "isRecommend": null,
        "name": "KY016-3 石子生产线 轮胎式移动砂石线设备 矿山专用车载式破碎站",
        "price": null,
        "priority": null,
        salesVolumeShowNumber: null,
        stockNumber: null,
        "typeId": null,
        projectCode: this.projectCode
      },
      typeIds: [],
      typeList: [],
      paramList: [],
      paramMap: [],
      attrList: [],
      attrMap: {},
      // 属性可选项
      attrSelect: [
        {
          attrId: 1,
          selects: ["1", "2", "3"]
        }
      ],
      isInit: false
    }
  },
  created() {

    this.getParamList();
    this.getTypeList();
    this.getAttrList();
  },
  mounted() {
    this.visible = [];
    // 初始化visible
    for (let i = 0; i < this.requestParam.bodyJson.length; i++) {
      this.visible.push(false);
    }
  },
  watch: {
    "typeIds": {
      handler: function (val, oldVal) {
        if (val.length === 0) {
          this.requestParam.typeId = null;
        } else {
          this.requestParam.typeId = val[val.length - 1];
        }
      },
      deep: true
    },
    "requestParam.bodyJson": {
      handler: function (val, oldVal) {
        this.visible = [];
        // 初始化visible
        for (let i = 0; i < this.requestParam.bodyJson.length; i++) {
          this.visible.push(false);
        }
      },
      deep: true
    },
    "requestParam.isHasAttr": {
      handler: function (val, oldVal) {
        if(!this.isInit){
          return;
        }
        if (!val) {
          this.requestParam.attrs = [];
          this.requestParam.attrGroups = [];
          this.setAttrSelect();
        }
      },
      deep: true
    },
    "requestParam.attrs": {
      handler: function (val, oldVal) {
        if(!this.isInit){
          return;
        }
        this.requestParam.attrGroups = [];
        this.addSubGoods();
        this.setAttrSelect();
      },
      deep: true
    },
    "requestParam.attrGroups": {
      handler: function (val, oldVal) {
        // if(!this.isInit){
        //   return;
        // }
        this.setAttrSelect();
        // 如果为SKU商品，则计算当前库存
        if (this.requestParam.isHasAttr) {
          let stockNumber = 0;
          for (let i = 0; i < this.requestParam.attrGroups.length; i++) {
            stockNumber += parseInt(this.requestParam.attrGroups[i].stockNumber);
          }
          this.requestParam.stockNumber = stockNumber;
        }
      },
      deep: true
    }
  },
  methods: {
    /**
     * 设置属性可选项
     * 根据在子商品中，已填写的属性，设置属性可选项
     */
    setAttrSelect() {
      this.attrSelect = [];
      let attrIdMap = {};
      for (let i = 0; i < this.requestParam.attrs.length; i++) {
        attrIdMap[this.requestParam.attrs[i].attrId] = [];
      }
      for (let i = 0; i < this.requestParam.attrGroups.length; i++) {
        for (let j = 0; j < this.requestParam.attrGroups[i].attrs.length; j++) {
          if (attrIdMap[this.requestParam.attrGroups[i].attrs[j].attrId]) {
            attrIdMap[this.requestParam.attrGroups[i].attrs[j].attrId].push(this.requestParam.attrGroups[i].attrs[j].value);
          }
        }
      }
      // 去重
      for (let key in attrIdMap) {
        attrIdMap[key] = [...new Set(attrIdMap[key])];
      }


      // 再根据attrIdMap，设置attrSelect
      for (let key in attrIdMap) {
        this.attrSelect.push({
          attrId: key,
          selects: attrIdMap[key]
        });
      }
    },
    addSubGoods() {
      let subGoods = {price: "",stockNumber:0, attrs: []};
      for (let i = 0; i < this.requestParam.attrs.length; i++) {

        subGoods.attrs.push({
          attrId: this.requestParam.attrs[i].attrId,
          value: ""
        });

      }
      this.requestParam.attrGroups.push(subGoods);
    },
    moveLeft(index) {
      if (index === 0) {
        return;
      }
      let temp = this.requestParam.bodyJson[index];
      this.requestParam.bodyJson[index] = this.requestParam.bodyJson[index - 1];
      this.requestParam.bodyJson[index - 1] = temp;
    },
    moveRight(index) {
      if (index === this.requestParam.bodyJson.length - 1) {
        return;
      }
      let temp = this.requestParam.bodyJson[index];
      this.requestParam.bodyJson[index] = this.requestParam.bodyJson[index + 1];
      this.requestParam.bodyJson[index + 1] = temp;
    },
    // 检测bodyJson是否超过15个
    checkBodyJson() {
      if (this.requestParam.bodyJson.length >= 15) {
        this.$message.error("最多只能添加15个");
        return false;
      }
      return true;
    },
    editImgInBodyJson(index) {
      this.$kt.file.chooseImageOne().then(res => {
        let loading = this.$loading({
          lock: true,
          text: '上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$kt.request.uploadFile({
          file: res.file,
          groupCode: "goods",
          stateSuccess: async (res) => {
            this.requestParam.bodyJson[index].type = "fileIdOfImg";
            this.requestParam.bodyJson[index].value = res.data.id;
            loading.close();
          },
          stateFail: (res) => {
            this.$message.error(res.errMsg);
            loading.close();
          }
        });
      });
    },
    editVideoInBodyJson(index) {
      this.$kt.file.chooseVideoOne().then(res => {
        let loading = this.$loading({
          lock: true,
          text: '上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$kt.request.uploadFile({
          file: res.file,
          groupCode: "goods",
          stateSuccess: async (res) => {
            this.requestParam.bodyJson[index].type = "fileIdOfVideo";
            this.requestParam.bodyJson[index].value = res.data.id;
            loading.close();
          },
          stateFail: (res) => {
            this.$message.error(res.errMsg);
            loading.close();
          }
        });
      });
    },


    chooseImgInBodyJson(index) {
      if (!this.checkBodyJson()) {
        return;
      }
      this.$kt.file.chooseImageOne().then(res => {
        let loading = this.$loading({
          lock: true,
          text: '上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$kt.request.uploadFile({
          file: res.file,
          groupCode: "goods",
          stateSuccess: async (res) => {
            this.requestParam.bodyJson.push({
              type: "fileIdOfImg",
              value: res.data.id
            });
            loading.close();
          },
          stateFail: (res) => {
            this.$message.error(res.errMsg);
            loading.close();
          }
        });
      });
    },
    chooseVideoInBodyJson() {
      if (!this.checkBodyJson()) {
        return;
      }
      this.$kt.file.chooseVideoOne().then(res => {
        let loading = this.$loading({
          lock: true,
          text: '上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$kt.request.uploadFile({
          file: res.file,
          groupCode: "goods",
          stateSuccess: async (res) => {
            this.requestParam.bodyJson.push({
              type: "fileIdOfVideo",
              value: res.data.id
            });
            loading.close();
          },
          stateFail: (res) => {
            this.$message.error(res.errMsg);
            loading.close();
          }
        });
      });
    },
    chooseImgInDetailJson() {
      this.$kt.file.chooseImageOne().then(res => {
        let loading = this.$loading({
          lock: true,
          text: '上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$kt.request.uploadFile({
          file: res.file,
          groupCode: "goods",
          stateSuccess: async (res) => {
            this.requestParam.detailJson.push({
              type: "fileIdOfImg",
              value: res.data.id
            });
            loading.close();
          },
          stateFail: (res) => {
            this.$message.error(res.errMsg);
            loading.close();
          }
        });
      });
    },
    chooseVideoInDetailJson() {
      this.$kt.file.chooseVideoOne().then(res => {
        let loading = this.$loading({
          lock: true,
          text: '上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$kt.request.uploadFile({
          file: res.file,
          groupCode: "goods",
          stateSuccess: async (res) => {
            this.requestParam.detailJson.push({
              type: "fileIdOfVideo",
              value: res.data.id
            });
            loading.close();
          },
          stateFail: (res) => {
            this.$message.error(res.errMsg);
            loading.close();
          }
        });
      });
    },
    moveLeftInD(index) {
      if (index === 0) {
        return;
      }
      let temp = this.requestParam.detailJson[index];
      this.requestParam.detailJson[index] = this.requestParam.detailJson[index - 1];
      this.requestParam.detailJson[index - 1] = temp;
    },
    moveRightInD(index) {
      if (index === this.requestParam.detailJson.length - 1) {
        return;
      }
      let temp = this.requestParam.detailJson[index];
      this.requestParam.detailJson[index] = this.requestParam.detailJson[index + 1];
      this.requestParam.detailJson[index + 1] = temp;
    },
    open(item) {
      this.isInit = false;
      if (item) {
        if (item.typeId) {
          if (item.type?.parentId) {
            this.typeIds = [item.type?.parentId, item.typeId];
          } else {
            this.typeIds = [item.typeId];
          }
        } else {
          this.typeIds = [];
        }
        this.requestParam = this.$kt.util.deepCopy(item);
      } else {
        this.requestParam = {
          bodyJson: [],
          detailJson: [],
          params: [],
          attrs: [],
          attrGroups: [],
          isHasAttr: false,
          "bodyJsonStr": null,
          "costPrice": null,
          "detailJsonStr": null,
          "fileIdOfMain": null,
          "gmtCreate": null,
          "gmtModified": null,
          "id": null,
          "isRecommend": null,
          "name": null,
          "price": null,
          "priority": null,
          salesVolumeShowNumber: null,
          stockNumber: null,
          "typeId": null,
          projectCode: this.projectCode
        }
      }
      this.show = true;
      setTimeout(()=>{
        this.isInit = true;
      },200);
    },
    save() {
      let requestParam = this.$kt.util.deepCopy(this.requestParam);
      requestParam.bodyJsonStr = JSON.stringify(this.requestParam.bodyJson);
      requestParam.detailJsonStr = JSON.stringify(this.requestParam.detailJson);
      requestParam.bodyJson = null;
      requestParam.detailJson = null;
      let loading = this.$loading({
        lock: true,
        text: '保存中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$kt.request.send({
        uri: "/business-shop-web/admin/shopGoodsDP/saveNew",
        data: requestParam,
        stateSuccess: (res) => {
          loading.close();
          this.show = false;
          this.$emit("saveSuccess");
        },
        stateFail: (res) => {
          loading.close();
          this.$message.error(res.errMsg);
        }
      });
    },
    getTypeList() {
      this.$kt.request.send({
        uri: "/business-shop-web/admin/shopGoodsTypeDP/getAllNew",
        data: {projectCode: this.projectCode},
        stateSuccess: (res) => {
          let bodyData = res.data;
          this.typeList = [];
          // 将所有parent_id为空的数据放到list中
          for (let i = 0; i < bodyData.length; i++) {
            if (!bodyData[i].parentId) {
              this.typeList.push(bodyData[i]);
            }
          }

          // 获取所有的子分类，放进list的children中
          for (let i = 0; i < this.typeList.length; i++) {
            this.typeList[i].children = [];
            for (let j = 0; j < bodyData.length; j++) {
              if (this.typeList[i].id === bodyData[j].parentId) {
                this.typeList[i].children.push(bodyData[j]);
              }
            }
          }
          this.$forceUpdate();

        }
      });
    },
    getParamList() {
      this.$kt.request.send({
        uri: "/business-shop-web/shopGoodsParam/getAll",
        stateSuccess: (res) => {
          this.paramList = res.data;
          this.paramMap = {};
          for (let i = 0; i < this.paramList.length; i++) {
            this.paramMap[this.paramList[i].id] = this.paramList[i];
          }
        }
      });
    },
    getAttrList() {
      this.$kt.request.send({
        uri: "/business-shop-web/shopGoodsAttr/getAll",
        stateSuccess: (res) => {
          this.attrList = res.data;
          this.attrMap = {};
          for (let i = 0; i < this.attrList.length; i++) {
            this.attrMap[this.attrList[i].id] = this.attrList[i];
          }
        }
      });
    }
  }
}

</script>

<template>
  <el-dialog
      title="保存商品"
      width="800px"
      v-model="show">
    <el-scrollbar style="height: calc(100vh - 150px);width:100%">

      <el-form label-position="top">
        <el-form-item label="是否推荐">
          <el-switch
              v-model="requestParam.isRecommend"></el-switch>
        </el-form-item>


        <el-form-item label="商品主图">
          <div style="text-align: center">
            <div class="in-json-box"
                 v-for="(item,index) in requestParam.bodyJson">

              <el-image
                  v-if="item.type === 'fileIdOfImg'"
                  :src="$kt.file.visit(item.value)"
                  fit="cover"
                  :preview-teleported="true"
                  :preview-src-list="[$kt.file.visit(item.value)]"
                  style="width: 100px; height: 100px;border-radius: 10px"></el-image>
              <!-- 视频 -->
              <video
                  v-if="item.type === 'fileIdOfVideo'"
                  style="width: 100px; height: 100px;border-radius: 10px"
                  :src="$kt.file.visit(item.value)"
                  controls></video>
              <!-- 删除和编辑 -->
              <div class="opt">
                <el-popover
                    :visible="visible[index]"
                    placement="top"
                    width="200"
                    trigger="click">
                  <p>
                    <!-- 选择图片 -->
                    <el-button
                        @click="editImgInBodyJson(index)"
                        size="small"
                        type="primary"
                        class="move-btn">
                      选择图片
                    </el-button>
                    <!-- 选择视频 -->
                    <el-button
                        @click="editVideoInBodyJson(index)"
                        size="small"
                        type="primary"
                        class="move-btn">
                      选择视频
                    </el-button>
                  </p>
                  <template #reference>
                    <el-button
                        @click="visible[index] = !visible[index]"
                        size="small"
                        type="primary"
                        class="move-btn">
<!--                      <kt-icon-->
<!--                          color="#fff"-->
<!--                          icon="el-icon-edit">-->
<!--                      </kt-icon>-->
                      编辑
                    </el-button>
                  </template>
                </el-popover>

                <el-button
                    @click="requestParam.bodyJson.splice(index,1)"
                    size="small"
                    type="danger"
                    style="color: #FFFFFF"
                    class="move-btn">
<!--                  <kt-icon-->
<!--                      color="#fff"-->
<!--                      icon="el-icon-delete">-->
<!--                  </kt-icon>-->
                  删除
                </el-button>

              </div>
              <!-- 左右移动 -->
              <div class="move">
                <el-button
                    @click="moveLeft(index)"
                    size="small"
                    class="move-btn">
<!--                  <kt-icon-->
<!--                      icon="el-icon-arrow-left">-->
<!--                  </kt-icon>-->
                  左移
                </el-button>
                <el-button
                    @click="moveRight(index)"
                    size="small"
                    class="move-btn">
<!--                  <kt-icon-->
<!--                      icon="el-icon-arrow-right">-->
<!--                  </kt-icon>-->
                  右移
                </el-button>
              </div>
            </div>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button
              @click="chooseImgInBodyJson()"
          >添加图片
          </el-button>
          <el-button
              @click="chooseVideoInBodyJson()"
          >添加视频
          </el-button>
        </el-form-item>

        <div style="height: 30px;"></div>

        <el-form-item label="参数">
          <table
              v-if="paramList&&paramList.length > 0"
              class="table">
            <tr v-for="(item,index) in requestParam.params">
              <td>
                <el-select
                    v-model="item.paramId"
                    placeholder="请选择"
                    style="width: 100%">
                  <el-option
                      v-for="item in paramList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </td>
              <td>
                <el-input
                    v-model="item.value"></el-input>
              </td>
              <td>
                <div style="text-align: center;">
                  <el-button
                      type="danger"
                      size="small"
                      style="color:#FFFFFF;"
                      @click="requestParam.params.splice(index,1)">
                    删除
                  </el-button>
                </div>
              </td>
            </tr>
            <tr>
              <td
                  colspan="2"
                  style="text-align: center">
                <el-button
                    @click="requestParam.params.push({paramId: null, value: null})"
                >添加参数
                </el-button>
              </td>
            </tr>
          </table>
        </el-form-item>


        <el-form-item label="商品名称">
          <el-input
              type="textarea"
              v-model="requestParam.name"></el-input>
        </el-form-item>
        <el-row gutter="10">
          <el-col :span="12">
            <el-form-item label="商品单价（人民币）">
              <el-input
                  v-model="requestParam.price">
                <template #prepend>￥</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品成本价（人民币）">
              <el-input
                  v-model="requestParam.costPrice">
                <template #prepend>￥</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品库存">
              <el-input
                  :disabled="requestParam.isHasAttr"
                  type="number"
                  v-model="requestParam.stockNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品展示销量">
              <el-input
                  type="number"
                  v-model="requestParam.salesVolumeShowNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="商品类型">
          <el-cascader
              style="width: 100%"
              :options="typeList"
              :props="{value: 'id', label: 'name', children: 'children'}"
              v-model="typeIds"></el-cascader>
        </el-form-item>

        <el-form-item label="是否为SKU商品">
          <el-switch
              v-model="requestParam.isHasAttr"></el-switch>
        </el-form-item>

        <el-form-item
            v-if="requestParam.isHasAttr"
            label="含有属性">
          <div
              style="display: inline-block;width: 100px;margin-right: 20px;padding-right: 40px;position: relative;"
              v-for="(item,index) in requestParam.attrs">
            <el-select
                v-model="item.attrId"
                placeholder="请选择"
                style="width: 100%">
              <el-option
                  v-for="item in attrList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
            <el-button
                type="danger"
                size="small"
                style="color: #FFFFFF;position: absolute;right: 0;top: 0;"
                @click="requestParam.attrs.splice(index,1)">
              X
            </el-button>
          </div>
          <div style="text-align: center;display: inline-block;margin-left: 10px">
            <el-button
                @click="requestParam.attrs.push({attrId: null})"
            >添加属性
            </el-button>
          </div>
        </el-form-item>

        <el-form-item
            v-if="requestParam.isHasAttr&&requestParam.attrs.length > 0"
            label="子商品">
          <div style="width: 100%;padding: 20px;box-sizing: border-box">
            <div
                v-for="(item,index) in requestParam.attrGroups"
                style="padding: 20px;border-bottom: 1px solid #999999;"
            >
              <div>

                <div v-for="(attr,index2) in item.attrs"
                     style="display: inline-block;width: 100px;margin-right: 20px">
                  <el-input
                      v-model="attr.value"
                      :placeholder="attrMap[attr.attrId].name"
                  >
                  </el-input>
                </div>
                价格：
                <el-input
                    style="width: 100px"
                    v-model="item.price"></el-input>

                库存：
                <el-input
                    type="number"
                    style="width: 100px"
                    v-model="item.stockNumber"></el-input>


                <!-- 删除 -->
                <el-button
                    type="danger"
                    style="color: #FFFFFF;margin-left: 20px;"
                    size="small"
                    @click="requestParam.attrGroups.splice(index,1)"
                >X
                </el-button>

              </div>
              <div style="height: 20px"></div>
              <div>
                <!-- 属性可选项 -->
                <div v-for="(attr,index2) in attrSelect" style="margin-bottom: 10px">
                  <span>{{ attrMap[attr.attrId].name }}：</span>
                  <div class="tag-btn"
                       v-for="(select,index3) in attr.selects"
                       :key="index3"
                       @click="item.attrs[index2].value = select"
                  >
                    {{ select }}
                  </div>
                </div>
              </div>
            </div>


            <div style="height: 20px"></div>
            <div style="text-align: center">
              <el-button
                  @click="addSubGoods()"
              >添加子商品
              </el-button>
            </div>
          </div>

        </el-form-item>


        <!-- 商品详情 -->
        <el-form-item label="商品详情">
          <div>
            <div
                v-for="(item,index) in requestParam.detailJson"
                style="margin-bottom: 20px;width: 100%"
            >
              <div>
                <div v-if="item.type === 'text'"

                >
                  <textarea
                      v-model="item.value"
                      auto-height
                      placeholder="输入文字详情"
                      style="width: 100%;color: #666666;border: none"></textarea>
                </div>

                <img
                    v-if="item.type === 'fileIdOfImg'"
                    :src="$kt.file.visit(item.value)"
                    style="width: 100%;"/>
                <video
                    v-if="item.type === 'fileIdOfVideo'"
                    style="width: 100%;"
                    :src="$kt.file.visit(item.value)"
                    controls></video>
              </div>

              <div>
                <!-- 删除、上移、下移 -->
                <div>
                  <el-button
                      type="danger"
                      style="color: #FFFFFF"
                      @click="requestParam.detailJson.splice(index,1)"
                  >删除
                  </el-button>
                  <el-button
                      @click="moveLeftInD(index)"
                  >上移
                  </el-button>
                  <el-button
                      @click="moveRightInD(index)"
                  >下移
                  </el-button>
                </div>
              </div>
            </div>
          </div>
          <div style="width: 100%;">
            <div style="text-align: center;width: 100%">
              <!-- 添加文字、图片、视频 -->
              <el-button
                  @click="requestParam.detailJson.push({type: 'text', value: '***'})"
              >添加文字
              </el-button>
              <el-button
                  @click="chooseImgInDetailJson()"
              >添加图片
              </el-button>
              <el-button
                  @click="chooseVideoInDetailJson()"
              >添加视频
              </el-button>
            </div>

          </div>

        </el-form-item>

      </el-form>
    </el-scrollbar>
    <div style="text-align: right">
      <el-button
          @click="show = false"
      >取消
      </el-button>
      <el-button
          type="primary"
          @click="save()"
      >保存
      </el-button>
    </div>


  </el-dialog>

</template>

<style scoped lang="scss">
.in-json-box {
  display: inline-block;
  width: 130px;
  height: 100px;
  text-align: center;
  border: 1px solid #ebeef5;
  margin: 10px;
  border-radius: 10px;
  cursor: pointer;

  .move {
    display: flex;
    justify-content: space-between;
    padding: 5px;
  }
}

.table {
  width: 100%;
  border-collapse: collapse;

  tr {
    border: 1px solid #ebeef5;

    td {
      padding: 10px;
      border-right: 1px solid #ebeef5;
    }
  }
}

.tag-btn {
  display: inline-block;
  padding: 0 5px 0 5px;
  margin-right: 10px;
  border: 1px solid #ebeef5;
  cursor: pointer;
  border-radius: 10px;
}

.tag-btn:hover {
  transform: scale(1.05);
}

.tag-btn:active {
  transform: scale(1);
}
</style>